<template>
	<el-dialog :visible.sync="visible" width="50%" title="角色分配" 
		:close-on-click-modal="false" :close-on-press-escape="false"
		:modal-append-to-body="false" :append-to-body="true">
		<el-form label-width="80px" :disabled="$refs['dataModify'] && $refs['dataModify'].method == 'remove'">
			<el-row>
				<el-col :span="12">
					<el-form-item label="角色">
						<el-select v-model="roleIds" size="mini" multiple>
							<el-option v-for="(role, i) in $store.state.config.roles" :key="role.id" :label="role.roleName" :value="role.id"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<span slot="footer" class="dialog-footer">
			<el-button size="mini" @click="visible = false">取消</el-button>
			<el-button size="mini" type="primary" @click="submit">确定
				<i class="fa fa-save"></i>
			</el-button>
		</span>
	</el-dialog>
</template>

<script>
import request from '@/utils/request';
import store from '@/store';
import cfg from './js/';

export default {
	store: cfg.store,
	data() {
		return {
			visible: false,
			userId: null,
			roleIds: []
		}
	},
	methods: {
		open(user) {
			this.userId = user.id;
			this.roleIds = user.roleIds;
			this.visible = true;
		},
		submit() {
			let self = this;
			let loading = self.$loading({
				target: self.$el,
				lock: true,
				text: '分配角色中...',
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			});
			let data = {
				id: this.userId,
				roleIds: this.roleIds
			};
			let config = {};
			config.data = data;
			let action = store.state.global.permissionMap['sys:user:assignRoles'];
			action.doAction(config).then(data => {
				for(let i = 0; i < self.$store.state.app.list.length; i++) {
					let e = self.$store.state.app.list[i];
					let element = data.element;
					if(e.id == element.id) {
						self.$store.state.app.list.splice(i, 1, element);
						break;
					}
				}
				self.$message({
					message: '分配角色成功',
					type: 'success',
					showClose: true
				});
				loading.close();
				self.visible = false;
			}).catch(error => {
				self.$message({
					message: '分配角色失败：' + error.detail.msg,
					type: 'error',
					showClose: true
				});
				loading.close();
			});
		}
	}
}
</script>